import React, { useState, useEffect } from 'react';
import './Suo.css';

const patients = {
  A: [
    { id: 1, name: '张芳芳', note: '备孕', status: 'online', lastVisit: '2024-03-15' },
    { id: 2, name: '艾小美', note: '产后恢复', status: 'offline', lastVisit: '2024-03-14' },
  ],
  B: [
    { id: 3, name: '白露', note: '高危妊娠', status: 'online', lastVisit: '2024-03-15' },
    { id: 4, name: '毕淑琴', note: '剖腹产术后', status: 'busy', lastVisit: '2024-03-13' },
  ],
  C: [
    { id: 5, name: '陈梅', note: '妊娠糖尿病', status: 'online', lastVisit: '2024-03-15' },
    { id: 6, name: '崔小玲', note: '双胎妊娠', status: 'offline', lastVisit: '2024-03-12' },
  ],
  L: [
    { id: 7, name: '李云婷', note: '剖腹产住院', status: 'online', lastVisit: '2024-03-15' },
    { id: 8, name: '刘晓华', note: '产后抑郁', status: 'busy', lastVisit: '2024-03-14' },
  ],
  W: [
    { id: 9, name: '王小红', note: '高血压', status: 'online', lastVisit: '2024-03-15' },
    { id: 10, name: '吴芳', note: '妊娠期贫血', status: 'offline', lastVisit: '2024-03-13' },
  ],
  X: [
    { id: 11, name: '肖蛋桑', note: '剖腹产住院', status: 'busy', lastVisit: '2024-03-15' },
    { id: 12, name: '徐玲玲', note: '先兆流产', status: 'online', lastVisit: '2024-03-14' },
  ],
  Z: [
    { id: 13, name: '张丽', note: '产后护理', status: 'online', lastVisit: '2024-03-15' },
    { id: 14, name: '赵雪', note: '备孕咨询', status: 'offline', lastVisit: '2024-03-12' },
  ],
};

function Suo() {
  const [selectedLetter, setSelectedLetter] = useState('A');
  const [searchTerm, setSearchTerm] = useState('');
  const [filteredPatients, setFilteredPatients] = useState([]);

  useEffect(() => {
    if (searchTerm) {
      const results = Object.values(patients)
        .flat()
        .filter(patient => 
          patient.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
          patient.note.toLowerCase().includes(searchTerm.toLowerCase())
        );
      setFilteredPatients(results);
    } else {
      setFilteredPatients(patients[selectedLetter] || []);
    }
  }, [searchTerm, selectedLetter]);

  const handleLetterClick = (letter) => {
    setSelectedLetter(letter);
    setSearchTerm('');
  };

  const getStatusText = (status) => {
    const statusMap = {
      online: '在线',
      offline: '离线',
      busy: '忙碌'
    };
    return statusMap[status] || status;
  };

  const handlePatientClick = (patient) => {
    // 这里可以添加导航到患者详情页的逻辑
    console.log(`查看患者: ${patient.name}`);
  };

  return (
    <div className="app3">
      <div className="sidebar">
        <div className="letters">
          {Object.keys(patients).map((letter) => (
            <span
              key={letter}
              className={`letter ${letter === selectedLetter ? 'active' : ''}`}
              onClick={() => handleLetterClick(letter)}
            >
              {letter}
            </span>
          ))}
        </div>
      </div>
      <div className="patients">
        <div className="search-container">
          <input
            type="text"
            placeholder="搜索患者姓名或备注..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="search-input"
          />
        </div>
        {filteredPatients.map((patient) => (
          <div key={patient.id} className="patient" onClick={() => handlePatientClick(patient)}>
            <div className="avatar">
              <img src={`https://api.multiavatar.com/${patient.name}.svg`} alt={patient.name} />
              <span className={`status-badge ${patient.status}`} title={getStatusText(patient.status)} />
            </div>
            <div className="info">
              <h2>{patient.name}</h2>
              <p>备注：{patient.note}</p>
              <p className="last-visit">上次就诊：{patient.lastVisit}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default Suo;